const oBox = document.getElementById('box'); //放盒子
const staticBtn = document.getElementsByTagName('button')[0]; //静态的brn
const moveBtn = document.getElementsByTagName('button')[1]; //动态的btn创建
const numInput = document.getElementsByTagName('input')[0]; //输入端数量
const allBtn = document.getElementsByTagName('button')[2]; //一次跳动
class StaticNumBlock { // 静态数柱的类
    constructor(options) {
        let { num, bg } = options;
        console.log(num, bg);
        this.width = '30'
        this.height = '30';
        this.creatediv(num, bg)
    }
    creatediv(num, bg) {
        this.el = document.createElement('div');
        this.el.style.width = this.width + 'px';
        this.el.style.height = this.height * num + 'px';
        this.el.style.background = bg;
        let span = document.createElement('span');
        span.innerHTML = num;
        this.el.appendChild(span);
        oBox.appendChild(this.el);
    }
}


class MoveNumBlock extends StaticNumBlock { //动态柱的类
    constructor(option) {
        super(option)
        this.clickel()
    }
    clickel() {
        this.el.addEventListener('click', this.move.bind(this), false);
        this.el.addEventListener('animationend', () => {
            this.el.classList.remove('jump');
            this.resolve()
        })

        //为什么没用
        // this.el.onclick = (e) => {
        //     let that = this.el
        //     this.move().bind(that);
        // }
        // this.el.onanimationend = () => {
        //     this.el.classList.remove('jump');
        //     this.resolve(true)
        // }
    }
    move() {
        return new Promise((resolve, reject) => {
            this.el.classList.add('jump');
            this.resolve = resolve
        })
    }
}


// 分别给按钮添加点击事件，实现所要求的的效果
// 静态柱的添加
staticBtn.onclick = () => {
    let val = parseInt(numInput.value);
    console.log(val)
    if (val >= 1 && val <= 9) {
        new StaticNumBlock({
            num: numInput.value,
            bg: 'red'
        })
    }
}

let moveArr = [];
moveBtn.onclick = () => {
    let val = parseInt(numInput.value);
    console.log(val)
    if (val >= 1 && val <= 9) {
        let creat = new MoveNumBlock({
            num: numInput.value,
            bg: 'pink'
        })
        moveArr.push(creat)
    }
}

// allBtn.addEventListener('click', async() => {
//     for (let i of moveArr) {
//         await i.move()
//     }
// }, false)


allBtn.onclick = async() => {
    console.log(111)
    for (let i of moveArr) {
        await i.move()
    }
}